<template>
<view>
	<!-- 右上角区域 -->
	<view class="right-box">
		<view class="top">
			<view class="top-item">
				<uni-icons type="vip" color="#ffe625" size="12"></uni-icons>
				1000
			</view>
			<view class="top-item">
				<uni-icons type="circle" color="#c4dae8" size="12"></uni-icons>
				10
			</view>
			<view class="top-item" @click="openEmail">
				<uni-icons type="email-filled" color="#ffffff" size="12"></uni-icons>
				邮箱
			</view>
			<view class="top-item" @click="openGameSet">
				<uni-icons type="gear-filled" color="#ffffff" size="12"></uni-icons>
				设置
			</view>
		</view>
		
		<!-- 广告 -->
		<view class="advertisement">
			<swiper class="swiper" circular 
				:autoplay="true" 
				:interval="4000"
				:duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image src="https://tcwjdl.oss-cn-chengdu.aliyuncs.com/banner1.jpg" mode="scaleToFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="https://tcwjdl.oss-cn-chengdu.aliyuncs.com/banner2.jpg" mode="scaleToFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="https://tcwjdl.oss-cn-chengdu.aliyuncs.com/banner3.jpg" mode="scaleToFill"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="https://tcwjdl.oss-cn-chengdu.aliyuncs.com/banner4.jpg" mode="scaleToFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
	
	<!-- 设置 带遮罩的弹框 -->
	<view class="zz" v-if="gameSetShow" @click="stopGameSet"></view>
	<view class="gameSet" v-if="gameSetShow">
		<view class="tit">游戏设置</view>
		<view class="sex">
			<view class="boy" @click="updateSex" data-sex="男">男</view>
			<view class="girl" @click="updateSex" data-sex="女">女</view>
		</view>
		<view class="login-out" @click="loginOut">退出登录</view>
	</view>
	
	<uni-popup ref="message" type="message">
		<uni-popup-message type="success" message="修改成功" :duration="1000"></uni-popup-message>
	</uni-popup>
	
</view>
</template>

<script>
import audioManager from '@/utils/audioManager.js';
import {updateSex,getUserInfo} from "@/api/index.js"
export default{
	name:"GameCurrency",
	data(){
		return{
			gameSetShow:false
		}
	},
	methods:{
		open(){
			audioManager.playAudio("dt_btn",false);
		},
		stopGameSet(){
			this.gameSetShow = false;
		},
		openGameSet(){
			this.gameSetShow = true;
		},
		updateSex(e){
			//updateSex
			let sex = e.target.dataset.sex;
			console.log(sex);
			let data = {
				"sex":sex
			}
			updateSex(data).then((data)=>{
				this.$refs.message.open();
				//再获取一下覆盖本地
				getUserInfo().then((data)=>{
					console.log("个人信息",data);
					uni.setStorageSync("userInfo",data.data);
				})
			})
		},
		loginOut(){
			//清理本地的缓存
			uni.clearStorageSync();
			//去登录页面
			uni.reLaunch({
				url:"/pages/login/login"
			})
		}
	}
}
</script>

<style scoped>
.right-box{
	width: 300px;
	height: 180px;
}
.top{
	width: 100%;
	height: 40px;
	line-height: 40px;
	display: flex;
	background-color: rgba(0, 0, 0, 0.7);
}
.top-item{
	width: 25%;
	text-align: center;
	color: #fff;
	height: 40px;
	font-size: 12px;
}
.advertisement{
	width: 60%;
	height: 95px;
	margin-top: 5px;
	float: right;
}
.swiper-item{
	width: 100%;
	height: 95px;
}
.swiper-item image{
	width: 100%;
	height: 95px;
}


.zz{
	position: fixed;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 99;
	left: 0;
	top: 0;
}
.gameSet{
	width: 260px;
	height: 200px;
	background-color: #fff;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	border-radius: 10px;
	z-index: 999;
}
.tit{
	width: 100%;
	text-align: center;
	height: 40px;
	line-height: 40px;
	color: #000;
}
.sex{
	width: 80%;
	height: 50px;
	margin: 0 auto;
	display: flex;
	margin-top: 20px;
}
.boy,.girl{
	width: 45%;
	height: 30px;
	text-align: center;
	line-height: 30px;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
}
.boy{
	background-color: #696acc;
}
.girl{
	background-color: #cc6264;
	margin-left: 20px;
}
.login-out{
	width: 80%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #fff;
	border-radius: 5px;
	margin-top: 180px;
	background-color: #191616;
	margin:0 auto;
}
</style>